<template>
        <div class="main-body">
    <div class="article_search">
      <el-form :inline="true" :model="filters">
        <el-form-item >
          <el-input v-model="filters.author_name" placeholder="请输入作者名字" />
        </el-form-item>
        <el-form-item>
          <el-select style="width: 200px;" v-model="select_value" placeholder="选择tag">
            <el-option v-for="item in article_tags" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchArticle">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="pageDataInfo.tableData" border style="width: 100%">
      <el-table-column prop="title" label="标题" :showOverflowTooltip="true" />
      <el-table-column prop="description" label="描述" :showOverflowTooltip="true" />
      <el-table-column prop="createdAt" label="发布时间" />
      <el-table-column prop="author.username" label="作者" />
      <el-table-column prop="tagList" label="标签">
        <template #default="scope">
          <el-tag v-for="(item,index) in scope.row.tagList" :key="index">
            {{ item }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
    <div class="xia">
      <el-pagination v-model:currentPage="pageDataInfo.pageIndex" v-model:page-size="pageDataInfo.pageSize"
      :page-sizes="[5, 10, 15, 20]" layout="total, sizes, prev, pager, next" :total="pageDataInfo.total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    
  </div>
</template>

<!-- prev尖叫号，page页码 -->

<script lang="ts" setup>
import {Article,ArticleSearchParam} from '@/types'
import { ref } from 'vue';
import axios from "@/utils/request"

const select_value = ref<string>('')

const article_tags = ref<string[]>([])


// []数组
// 初始化

//   const tableData = ref<Article[]|null>([])

//   const article_search_param:ArticleSearchParam = {
//   limit:20,
//   offset:100
// }
interface PageDataInfo{
  tableData: Article[];
  pageSize:number;
  pageIndex:number;
  total:number;
}
const pageDataInfo = ref<PageDataInfo>({
  tableData:[],
  pageIndex:1,
  pageSize:10,
  total:10
})

// 搜索框
const filters = ref({
  author_name:''
})

const getTags = () => {
  axios.get('/tags').then(res=>{
    article_tags.value = res.data.tags
  })
}




const searchArticle = () => {
  pageDataInfo.value.pageIndex = 1
  pageDataInfo.value.pageSize = 10
  get_articles(pageDataInfo.value.pageIndex, pageDataInfo.value.pageSize)
}


// 分页变化
const handleSizeChange = (val:number) => {
  pageDataInfo.value.pageSize = val
  get_articles(pageDataInfo.value.pageIndex,pageDataInfo.value.pageSize)
}

const handleCurrentChange = (val:number) => {
  pageDataInfo.value.pageIndex = val
  get_articles(pageDataInfo.value.pageIndex,pageDataInfo.value.pageSize)
}
// 定义该方法
const get_articles =  (pageIndex:number, pageSize:number) => {
  const article_search_param:ArticleSearchParam = {
    limit:pageSize,
    offset:pageIndex-1
  }
  if(filters.value.author_name !== ''){
    article_search_param.author = filters.value.author_name
  }

  if(select_value.value !== ''){
    article_search_param.tag = select_value.value
  }




  // 调服务器接口
  axios.get('/articles',{params:article_search_param}).then(res=>{
  pageDataInfo.value.tableData = res.data.articles
  pageDataInfo.value.total = res.data.articlesCount
})
}
getTags()
get_articles(pageDataInfo.value.pageIndex, pageDataInfo.value.pageSize)
// 然后使用该方法

</script>


  
  <style scoped>
.main-body{
  padding: 16px 16px 30px;
  overflow: auto;
  height: 100%;
  box-sizing: border-box;
}
.main-body .xia{
  margin-top: 20px;
    float: right;
}
</style>

